var lis = document.querySelectorAll("ul.img-small-list>li"),
	moveStep = 0,
	maxStep = lis.length - 4< 0 ? 0 : lis.length - 4;
// 首先找到prev
var prev = document.querySelector("span.prev")
// 给prev绑定点击事件
prev.onclick = function() {
	if(moveStep === 0) return;
	moveStep--;
	var ul = document.querySelector("ul.img-small-list");
	ul.style.transform = "translate(-"+ moveStep +"00%)";
};
var next = document.querySelector("span.next")
// 给next绑定点击事件
next.onclick = function() {
	// 如果图片很少或者是向右移动到末尾了
	if(moveStep === maxStep) return;
	moveStep++;
	var ul = document.querySelector("ul.img-small-list");
	ul.style.transform = "translate(-"+ moveStep +"00%)";
};
//  首先要找到需要绑定滑动的目标
lis.forEach(function(item) {
	item.onclick = function(e) {
		if(e.target.classList.contains("active")) return
		document.querySelector(".active").classList.remove("active")
		// 判断数组里面有没有active
		this.classList.add("active");
		document.querySelector(".img-main>img").src = this.dataset.img;
	};
})
document.querySelector(".order").onclick = function() {
	window.location.href = "order/order.html"
}
document.querySelectorAll("ul.imgs-title>li").forEach(function(item) {
	item.onclick = function() {
		if(this.classList.contains("show")) return;
		document.querySelector("ul.imgs-title>li.show").classList.remove("show");
		this.classList.add("show");
	}
})
var ob = new IntersectionObserver(
	function(entry) {
		if (entry[0].isIntersecting) {
			var showLi = document.querySelector("ul.imgs-title>li.show");
			if (showLi)
				showLi.classList.remove("show");
				document.querySelectorAll("ul.imgs-title>li")[entry[0].target.index].classList.add("show");
		}
	}, {
	root: null,
	rootMargin: "-30% 0px -50% 0px",
	threshold: [0]
	}
);
var boxs = document.querySelectorAll(".box");
for(var i = 0,len = boxs.length; i < len; i++) {
	boxs[i].index = i;
	ob.observe(boxs[i]);
}
var minStep = 1;
	maxStep = 50;
document.querySelector(".menu-sub-bottom>input").value = minStep;	
document.querySelector(".menu-sub-bottom>div").onclick = function(e) {
	if(e.target.classList.contains("increase")) {
		document.querySelector(".menu-sub-bottom>input").value = minStep === maxStep ? minStep = 1 : minStep += 1;
	}
	if(e.target.classList.contains("decrease")) {
		if(document.querySelector(".menu-sub-bottom>input").value <= 1) return;
		document.querySelector(".menu-sub-bottom>input").value = minStep === maxStep ? minStep = 1 : minStep -= 1;
	}
}